import { Component } from 'react';
import { Route } from 'react-router-dom';
import { TabBar } from 'antd-mobile';
import './index.scss';


import Index from '../Index';
import HouseList from '../HouseList';
import News from '../News';
import Profile from '../Profile';

const renderTabs = [
  {
    title: '首页',
    key: 'index',
    icon: 'icon-ind',
    badge: '1',
    route: '/home',
  },
  {
    title: '找房',
    key: 'findHouse',
    icon: 'icon-findHouse',
    badge: '2',
    route: '/home/findHouse',
  },
  {
    title: '资讯',
    key: 'news',
    icon: 'icon-infom',
    badge: '5',
    dot: true,
    route: '/home/news',
  },
  {
    title: '我的',
    key: 'My',
    icon: 'icon-my',
    badge: '10',
    route: '/home/profile',
  },
];
export default class Home extends Component {
  state = {
    selectedTab: 'index',
  };
  render() {
    return (
      <div className='home'>
        <Route exact path='/home' component={Index} />
        <Route path='/home/findHouse' component={HouseList} />
        <Route path='/home/news' component={News} />
        <Route path='/home/profile' component={Profile} />
        <div style={{ position: 'fixed', bottom: 0, width: '100%' }}>
          <TabBar tintColor='#21b97a' barTintColor='white' noRenderContent>
            {this.renderTabs()}
          </TabBar>
        </div>
      </div>
    );
  }
  renderTabs() {
    const { pathname } = this.props.location;
    return renderTabs.map(item => (
      <TabBar.Item
        title={item.title}
        key={item.key}
        icon={<i className={'iconfont ' + item.icon} />}
        selectedIcon={<i className={'iconfont ' + item.icon} />}
        selected={item.route === pathname}
        onPress={() => this.props.history.push(item.route)}
        data-seed={item.dataSeed}
      />
    ));
  }
  setActiveKey = e => {
    console.log(e);
  };
}
